<template>
  <CommonPanel title="部门人数TOP5">
      <div class="rank-box">
      <RankItem class="rank-box_item" v-for="item of lists" :key="item.name" :info="item" />
    </div>
  </CommonPanel>
</template>

<script setup>
import * as echarts from 'echarts';
import { computed, onMounted, ref, watch } from "vue";
const props = defineProps({
  data: Object
});

import RankItem from "../components/rank-item.vue";

const loading = ref(false);
const visible = ref(false);
const columns = [
  { label: "排名", prop: "index" },
  { label: "事件类型", prop: "name" },
  { label: "次数", prop: "num" },
];
let lists = ref([
  { name: "1", num: 20 },
  { name: "2", num: 30 },
  { name: "3", num: 40 },
  { name: "4", num: 40 },
  { name: "5", num: 40 },
]);
let copyList = ref([]);


watch(
  () => props.data,
  () => {
    let maxNum = 0
    props.data?.org_lists?.forEach((i, v) => {
      if (v === 0) {
        maxNum = i.num
      }
      i.maxNum = maxNum
      i.index = v + 1
    })
    lists.value = props.data?.org_lists.slice(0, 5);
    console.log(lists,'lists')
    copyList.value = props.data?.org_lists
  }
);
const seeMore = () => {
  visible.value = true;
};


</script>

<style lang="scss" scoped>
.rank-box {
  height: 100%;
  padding: 12px 16px 12px 23px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  &_item {
    flex: 1;
  }

}
</style>